<template>
  <div class="formMask" @click.self="cal">
    <div class="form">
      <h2>{{isAdd?'增加':'修改'}}</h2>
      <ul>
        <li>
          标题:
          <input type="text" v-model="user.title" />
        </li>
        <li>
          内容:
          <input type="text" v-model="user.con" />
        </li>
      </ul>
      <p>
        <button @click="confirm">确定</button>
        <button @click="cal">取消</button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isAdd"],
  data() {
    return {
      user: {
        title: "",
        con: ""
      }
    };
  },
  methods: {
    // 点击取消
    cal() {
      !this.isAdd && this.empty();
      this.$emit("cal");
    },
    // 点击确定
    confirm() {
      if (this.isAdd) {
        this.$emit("add", this.user);
      } else {
        this.$emit("ud", this.user);
      }
    },
    empty() {
      this.user = {
        title: "",
        con: ""
      };
    }
  }
};
</script>

<style>
.formMask{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0);
    position:fixed;
    top: 0;
    left: 0;
}
.form {
  width: 400px;
  height: 240px;
  background-color: #fff;

  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -120px;
}
.form h2 {
  height: 30px;
  background-color: blue;
  color: #fff;
  line-height: 30px;
  text-indent: 5px;
}
.form p {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #efefef;
  position: absolute;
  bottom: 0;
}
</style>